<template>
  <div>
    <el-table :data="tableData">
      <!-- <el-table-column label="序号" width="100">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column> -->
      <!-- 使用递归的方式渲染表头 -->
      <handleTable :dynamicColumns="dynamicColumns"></handleTable>
    </el-table>
  </div>
</template>

<script>
import handleTable from './handleTable.vue'
export default {
  components: { handleTable },
  name: 'RecursiveTableColumn',
  // props: {
  //   dynamicColumns: {
  //     type: Array,
  //     required: true
  //   }
  // },
  data () {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ],
      // 待循环渲染的动态列数组，包含二级表头
      dynamicColumns: [
        {
          label: '基本信息1',
          children: [
            { label: '姓名', prop: 'name' },
            { label: '年龄', prop: 'age' },
            { label: '性别', prop: 'gender' }
          ]
        },
        {
          label: '基本信息2',
          children: [
            {
              label: '信息3',
              children: [
                {
                  label: '姓名',
                  children: [
                    {
                      label: '姓名',
                      children: [
                        { label: '姓名', prop: 'name' },
                        { label: '年龄', prop: 'age' },
                        { label: '性别', prop: 'gender' }
                      ]
                    },
                    { label: '年龄', prop: 'age' },
                    { label: '性别', prop: 'gender' }
                  ]
                },
                { label: '年龄', prop: 'age1' },
                { label: '性别', prop: 'gender1' }
              ]
            },
            { label: '年龄', prop: 'age' },
            { label: '性别', prop: 'gender' }
          ]
        }
      ]
    }
  }
}
</script>
